<template>
    <div class="wrapper about">
        <mt-header :fixed="false" title="实名认证" mtClass="no-bg"/>
        <div class="stauts" v-show="$route.query.realState=='4'"><span>已驳回，原因：{{$route.query.rejectDesc}}</span></div>
        <div class="list">
            <div>
                <mt-field placeholder="姓名" disableClear type="text" v-model="inputValueName"></mt-field>
            </div>
            <div>
                <mt-field placeholder="身份证号" disableClear type="text" v-model="inputValueIDcard"></mt-field>
            </div>
        </div>
        <div class="blank-9"></div>
        <div class="list">
            <div class="list-title">请上传你的身份证照片</div>
            <div class="list-inner">
                <div class="inner-top">
                    您可以上传JPG、GIF、PNG或jpeg格式，身份证号必须清楚，图像文件的总大小不应超过6M。
                </div>
                <div class="inner-row">
                    <div class="inner-item">
                        <div class="inner-item-example" @click="enlarge=true">
                            <img src="../../assets/example1.png">
                        </div>
                        <div class="inner-text">
                            <img class="icon" src="../../assets/add.png" @click="callEvent(0)">
                            <div class="text">请上传身份证正面照片</div>
                        </div>
                        <div class="img" v-show="base64Img0">
                            <img :src="base64Img0">
                            <span class="off" @click="delImg(0)">×</span>
                        </div>
                    </div>
                    <div class="inner-item">
                        <div class="inner-item-example" @click="enlarge=true">
                            <img src="../../assets/example2.png">
                        </div>
                        <div class="inner-text">
                            <img class="icon" src="../../assets/add.png" @click="callEvent(1)">
                            <div class="text">请上传身份证反面照片</div>
                        </div>
                        
                        <!-- <input type="file" class="upload" @change="tirggerFile($event,1)" ref="inputer" accept="image/png,image/jpeg,image/gif,image/jpg"/> -->
                        <div class="img" v-show="base64Img1">
                            <img :src="base64Img1">
                            <span class="off" @click="delImg(1)">×</span>
                        </div>
                    </div>
                </div>
                <div class="inner-row">
                    <div class="inner-item">
                        <div class="inner-item-example" @click="enlarge=true">
                            <img src="../../assets/example3.png">
                        </div>
                        <div class="inner-text">
                            <img class="icon" src="../../assets/add.png" @click="callEvent(2)">
                            <div class="text">手持身份证照片<br>并手写日期+Reading Box</div>
                        </div>
                        <div class="img" v-show="base64Img2">
                            <img :src="base64Img2">
                            <span class="off" @click="delImg(2)">×</span>
                        </div>
                    </div>
                    <div class="inner-item" @click="enlarge=true">
                        <div class="inner-item-example">
                            <img src="../../assets/example4.png"><span>查看手持示例</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="default-btn">
            <mt-button type="primary" size="large" :disabled="(inputValueName&&inputValueIDcard&&base64Img.length==3)?false:true" @click.native="submit">
                {{ ($route.query.realState=='1')?'提交':'重新提交' }}
            </mt-button>
        </div>
        <div class="enlarge" v-show="enlarge">
            <div class="inner">
                <span class="off" @click="enlarge=false"></span>
                <img class="icon" src="../../assets/example4.png">
                <div class="text">手持身份证照片<br/>并手写日期+Reading Box</div>
            </div>
        </div>
    </div>
</template>

<script>
import mtHeader from "@/components/Header"
import { UpdateUserRealInfo } from '@/api/api'
import { Toast } from 'mint-ui';
import { dataURItoBlob, getSystemType } from '@/utils'
import { validateIDcard } from '@/utils/validate'
export default {
    data(){
        return {
            inputValueName: '',
            inputValueIDcard: '',
            enlarge:false,
            file: [],
            file0:'',
            file1:'',
            file2:'',
            base64Img:[],
            base64Img0: '',
            base64Img1: '',
            base64Img2: ''
        }
    },
    components:{
        mtHeader
    },
    mounted(){
        //将要给原生调用的方法挂载到 window 上面
        if( getSystemType().type == 'android' ){
            window.sendPhotoBase64Feedback = this.sendPhotoBase64Feedback;
        }
        if( getSystemType().type == 'ios' ){
            this.flag = true;
            window.feedbackResult = this.feedbackResult;
        }
    },
    methods:{
        callEvent(index){
            if( getSystemType().type == 'android' ){
                window.javaObj.startAlbumFeedback(index);
            }
            if( getSystemType().type == 'ios' ){
                window.webkit.messageHandlers.startAlbumFeedback.postMessage({type:index});
            }
        },
        sendPhotoBase64Feedback(str) {
            // console.log(str);
            var result = str.split(",");
            if( result[0] == '0' ){
                //身份证正面回调
                this.base64Img0 = 'data:image/png;base64,' + result[1];
                this.base64Img[0] = this.base64Img0;
                dataURItoBlob(this.base64Img0, (res) => {
                    this.file0 = res;
                    this.file[0] = res;
                });
            }
            if( result[0] == '1' ){
                //身份证反面回调
                this.base64Img1 = 'data:image/png;base64,' + result[1];
                this.base64Img[1] = this.base64Img1;
                dataURItoBlob(this.base64Img1, (res) => {
                    this.file1 = res;
                    this.file[1] = res;
                });
            }
            if( result[0] == '2' ){
                //手持身份证正面回调
                this.base64Img2 = 'data:image/png;base64,' + result[1];
                this.base64Img[2] = this.base64Img2;
                dataURItoBlob(this.base64Img2, (res) => {
                    this.file2 = res;
                    this.file[2] = res;
                });
            }
        },
        feedbackResult(type,base64){
            // console.log(type,base64);
            if( type == '0' ){
                //身份证正面回调
                this.base64Img0 = 'data:image/png;base64,' + base64;
                this.base64Img[0] = this.base64Img0;
                dataURItoBlob(this.base64Img0, (res) => {
                    this.file0 = res;
                    this.file[0] = res;
                });
            }
            if( type == '1' ){
                //身份证反面回调
                this.base64Img1 = 'data:image/png;base64,' + base64;
                this.base64Img[1] = this.base64Img1;
                dataURItoBlob(this.base64Img1, (res) => {
                    this.file1 = res;
                    this.file[1] = res;
                });
            }
            if( type == '2' ){
                //手持身份证正面回调
                this.base64Img2 = 'data:image/png;base64,' + base64;
                this.base64Img[2] = this.base64Img2;
                dataURItoBlob(this.base64Img2, (res) => {
                    this.file2 = res;
                    this.file[2] = res;
                });
            }
        },
        getObjectURL(file) {
            var url = null ;
            if (window.createObjectURL!=undefined) { // basic
                url = window.createObjectURL(file) ;
            } else if (window.URL!=undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file) ;
            } else if (window.webkitURL!=undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file) ;
            }
            return url ;
        },
        delImg(index){
            this.$delete(this.file,index);
            this.$delete(this.base64Img,index);
            if( index == 0 ){
                this.base64Img0 = '';
            }
            if( index == 1 ){
                this.base64Img1 = '';
            }
            if( index == 2 ){
                this.base64Img2 = '';
            }
        },
        submit(){
            if( validateIDcard(this.inputValueIDcard) ){
                UpdateUserRealInfo({
                    file: this.file,
                    name: this.inputValueName,
                    idNumber: this.inputValueIDcard
                }).then(res => {
                    if( res.code == 200 ){
                        Toast({
                            message: "提交成功,请等待审核",
                            iconClass: 'icon iconfont icon-ic_check'
                        })
                        this.$router.push('/account')
                    }else{
                        Toast({
                            message: res.msg,
                            iconClass: 'icon iconfont icon-dingdanzhuangtaishibai'
                        });
                    }
                })
            }else{
                Toast({
                    message: '身份证输入不合法',
                    className: 'innputPhoneToast'
                });
            }
        }
    }
}
</script>


<style lang="stylus" scoped>
.wrapper{
    height:100%;
    .stauts{
        height: 30px;
        line-height:30px;
        text-align:center;
        background:rgba(0,0,0,.2);
        color:#fff;
        position:relative;
        span{
            width:100%;
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
    }
    .list{
        .list-title{
            color:#666;
            margin: 27px 0 20px 0;
        }
        .list-inner{
            color:#B3B3B3;
            font-size:12px;
            .inner-top{
                padding:15px 20px;
                background:#F2F3F9;
            }
            .inner-row{
                display:flex;
                justify-content:space-around;
                .inner-item{
                    width:47%;
                    margin-top:15px;
                    background:#F2F3F9;
                    border-radius:3px;
                    text-align:center;
                    position:relative;
                    .inner-item-example{
                        span{
                            color:#666;
                            position:absolute;
                            top:50%;
                            left:50%;
                            transform:translate(-50%,-50%);
                        }
                    }
                    .inner-text{
                        width:100%;
                        height:100%;
                        position:absolute;
                        top:0;
                        left:0;
                        .icon{
                            width:49px;
                            height:49px;
                            margin:0 auto;
                            margin-top:10px;
                        }
                        .text{
                            color:#666666;
                            font-size:12px;
                            position:absolute;
                            bottom:7px;
                            width:100%;
                            text-align:center;
                        }
                    }
                    
                    .upload{
                        position: absolute;
                        top: 0;
                        bottom: 0;
                        left: 0;
                        right: 0;
                        width: 100%;
                        height: 100%;
                        opacity: 0;
                    }
                    .img{
                        width:100%;
                        height:100%;
                        position:absolute;
                        top:50%;
                        left:50%;
                        transform:translate(-50%,-50%);
                        background:#f2f3f9;
                        border-radius: 3px;
                        img{
                            width:auto;
                            height:100%;
                            margin:0 auto;
                        }
                        .off{
                            position:absolute;
                            top:0;
                            right:0;
                            display:inline-block;
                            width:20px;
                            height:20px;
                            line-height 20px;
                            text-align:center;
                            background: rgba(0,0,0,0.3);
                            border-radius:50%;
                            color:#fff;
                            font-size: 14px;
                        }
                    }
                }
            }
        }
    }
    .enlarge{
        position:absolute;
        top:0;
        left:0;
        bottom:0;
        right:0;
        background:rgba(0,0,0,.3);
        .inner{
            width:80%;
            height:auto;
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            background:#fff;
            padding:20px;
            border-radius:5px;
            .off{
                display: inline-block;
                width: 27px;
                height: 27px;
                position: absolute;
                right: -15px;
                top: -15px;
                background:url('../../assets/close1.png') no-repeat 0 0;
                background-size:100% 100%;
            }
            .text{
                margin-top:10px;
                color:#666;
                text-align:center;
            }
        }
    }
}
</style>
